<template>
	<view>
		<view class="tabbar_after_box">
			<view class="after"></view>
		</view>
		<view class="tabbar_box">
			<view class="tabbar">
				<view class="label" v-for="(item, index) in tabbarList" :key="index" @click.stop="selectTabbarTap(index)">
					<view class="icons">
						<view v-if="current != index ">
							<view class="iconfont"  v-if="item.iconDefaultImage"
							 :class="['icon'+'-'+item.iconDefaultImage]":style="{ color: current === index ? template.page.themeColor : template.page.auxiliaryColor }">
							</view>
							<image style="width: 52rpx;height: 52rpx;" v-else :src="item.defaultImage" mode=""></image>
						</view>
						<view class=""  v-else>
							<view class="iconfont"  v-if="item.iconSelectImage"
							 :class="['icon'+'-'+item.iconSelectImage]" :style="{ color: current === index ? template.page.themeColor : template.page.auxiliaryColor }">
							</view>
							<image  style="width: 52rpx;height: 52rpx;" v-else :src="item.selectImage" mode=""></image>
						</view>
						<view class="num" v-if="index==2" :style="{ background: index == 2 ? template.page.themeColor : template.page.auxiliaryColor }">{{cart}}</view>
					</view>
					<view class="name" :style="{ color: current === index ? template.page.themeColor : template.page.auxiliaryColor }">
						{{ item.iconName }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {getTemplateConf} from '../../static/utils/api.js'
export default {
	name: 'tabbar',
	props: {
		current: {
			type: Number,
			default: 0
		},
		cart: {
			type: Number,
			default: 0
		},
		template:{
			type:Object,
			default: {}
		},
		tabbarList:{
			type:Array,
			default: ()=>[
					{
					     iconName: '首页',
					     iconSelectImage: 'shouye',
					     iconOrder: '0',
					     iconPath: '/pages/index/index',
					     defaultImage: '',
					     selectImage: '',
					   },
									
					   {
					     iconName: '下单',
					     iconSelectImage: 'goodsnewfill2',
					     iconOrder: '1',
					     iconPath: '/pages/category/category',
					     defaultImage: '',
					     selectImage: '',
					   },
					   {
					     iconName: '购物车',
					     iconSelectImage: 'gouwuche',
					     iconOrder: '2',
					     iconPath: '/pages/cart/cart',
					     defaultImage: '',
					     selectImage: '',
					   },
					   {
					     iconName: '我的',
					     iconSelectImage: 'wode3',
					     iconOrder: '3',
					     iconPath: '/pages/user/index',
					     defaultImage: '',
					     selectImage: '',
					   },
				]
		}
	},
	data() {
		return {
			// templateConfig: uni.getStorageSync('templateConfig'),
			// tabbarList:this.tabbarList, 
		};
	},
	mounted() {
		
	},
	onShow() {
		// setTimeout(() => {
		// 	this.template = uni.getStorageSync('templateConfig');
		// 	this.tabbarList=this.templateConfig.tabbarList
		// 	console.log(this.tabbarList,99999)
		// }, 500);
	},
	methods: {
		
		selectTabbarTap(index) {
			let self = this;
			let path = self.tabbarList[index].iconPath;
			uni.switchTab({ url: path });
		}
	}
};
</script>

<style lang="less">
	.iconfont {
	  width: 1em;
	  height: 1em;
	  font-size: 48rpx;
	  vertical-align: -0.15em;
	  fill: currentColor;
	  overflow: hidden;
	}
.tabbar_after_box {
	width: 100%;
	padding-bottom: env(safe-area-inset-bottom);
	.after {
		width: 100%;
		height: 120rpx;
	}
}
.tabbar_box {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	background-color: #fff;
	padding-bottom: env(safe-area-inset-bottom);
	.tabbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 120rpx;
		width: 100%;
		.label {
			flex: 1;
			min-width: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			.icons {
				width: 50rpx;
				height: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				.num {
					position: absolute;
					width: 34rpx;
					height: 34rpx;
					background-color: #f54319;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 100%;
					right: -14rpx;
					top: -10rpx;
					font-size: 24rpx;
				}
			}
			.name {
				font-size: 28rpx;
			}
		}
	}
}
</style>
